<!DOCTYPE html>
<html>
<head>
  <style>
    .vega-actions a {
        margin-right: 12px;
        color: #757575;
        font-weight: normal;
        font-size: 13px;
    }
    .error {
        color: red;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@4"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@2.6.0"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@3"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
      var spec = {"config": {"view": {"width": 400, "height": 300}}, "layer": [{"data": {"name": "data-4edd90d1685d4abf64f4ded879d296af"}, "mark": {"type": "line", "color": "orange", "interpolate": "basis", "strokeWidth": 4}, "encoding": {"tooltip": [{"type": "quantitative", "field": "Angry"}], "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Angry"}}}, {"mark": "point", "encoding": {"opacity": {"value": 0}, "x": {"type": "quantitative", "field": "Time"}}, "selection": {"selector007": {"type": "single", "nearest": true, "on": "mouseover", "fields": ["Time"], "empty": "none"}}}, {"data": {"name": "data-4edd90d1685d4abf64f4ded879d296af"}, "mark": "point", "encoding": {"opacity": {"condition": {"value": 1, "selection": "selector007"}, "value": 0}, "tooltip": [{"type": "quantitative", "field": "Angry"}], "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Angry"}}}, {"mark": {"type": "rule", "color": "gray"}, "encoding": {"x": {"type": "quantitative", "field": "Time"}}, "transform": [{"filter": {"selection": "selector007"}}]}, {"data": {"name": "data-4edd90d1685d4abf64f4ded879d296af"}, "mark": {"type": "text", "align": "left", "dx": 5, "dy": -5}, "encoding": {"text": {"condition": {"type": "quantitative", "field": "Angry", "selection": "selector007"}, "value": " "}, "tooltip": [{"type": "quantitative", "field": "Angry"}], "x": {"type": "quantitative", "field": "Time"}, "y": {"type": "quantitative", "field": "Angry"}}}], "data": {"url": "https://raw.githubusercontent.com/altair-viz/vega_datasets/master/vega_datasets/_data/stocks.csv"}, "height": 300, "title": "Stock History", "width": 600, "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json", "datasets": {"data-4edd90d1685d4abf64f4ded879d296af": [{"Time": 0, "Angry": 0.03192256763577461, "Disgust": 0.00017067296721506864, "Fear": 0.044753599911928184, "Happy": 0.0026904302649199967, "Sad": 0.3870106041431427, "Surprise": 0.00038476788904517884, "Neutral": 0.5330673456192017}, {"Time": 1, "Angry": 0.06365147233009337, "Disgust": 0.0005431822501122953, "Fear": 0.04372256621718407, "Happy": 0.0012019764399155974, "Sad": 0.32301896810531616, "Surprise": 0.0025796086993068452, "Neutral": 0.5652822852134705}, {"Time": 2, "Angry": 0.07320519536733627, "Disgust": 0.0031620291993021965, "Fear": 0.035744328051805496, "Happy": 0.002604758832603693, "Sad": 0.3406585156917572, "Surprise": 0.003268346190452576, "Neutral": 0.5413568615913391}, {"Time": 3, "Angry": 0.09379637241363524, "Disgust": 0.0007316473056562245, "Fear": 0.05959361419081687, "Happy": 0.005761507432907821, "Sad": 0.3864140808582306, "Surprise": 0.001000988413579762, "Neutral": 0.4527018666267395}, {"Time": 4, "Angry": 0.1373451203107834, "Disgust": 0.003701017005369067, "Fear": 0.06773211807012558, "Happy": 0.0008153084781952202, "Sad": 0.5830869078636169, "Surprise": 0.0012003233423456552, "Neutral": 0.206119105219841}, {"Time": 5, "Angry": 0.07761835306882857, "Disgust": 0.0010494546731933954, "Fear": 0.06260459125041963, "Happy": 0.0013863149797543885, "Sad": 0.4659776985645294, "Surprise": 0.005962156690657139, "Neutral": 0.3854013681411743}, {"Time": 6, "Angry": 0.0827546939253807, "Disgust": 0.0004204721481073648, "Fear": 0.0942322313785553, "Happy": 0.0016462786588817835, "Sad": 0.6228145360946655, "Surprise": 0.0028551288414746523, "Neutral": 0.1952767372131348}, {"Time": 7, "Angry": 0.11089791357517242, "Disgust": 0.001208650297485292, "Fear": 0.08441001921892166, "Happy": 0.002326374175027013, "Sad": 0.5794225931167603, "Surprise": 0.004746418446302414, "Neutral": 0.21698804199695587}, {"Time": 8, "Angry": 0.10905024409294127, "Disgust": 0.0017027613939717412, "Fear": 0.07726746797561647, "Happy": 0.001852893037721515, "Sad": 0.5844889879226685, "Surprise": 0.004694725386798382, "Neutral": 0.22094294428825376}, {"Time": 9, "Angry": 0.09478557854890823, "Disgust": 0.00288584060035646, "Fear": 0.08931182324886322, "Happy": 0.0014161253347992895, "Sad": 0.6526433229446411, "Surprise": 0.029788769781589505, "Neutral": 0.12916859984397888}, {"Time": 10, "Angry": 0.0786883607506752, "Disgust": 0.0007688027690164745, "Fear": 0.04839332401752472, "Happy": 0.0010528936982154846, "Sad": 0.532079815864563, "Surprise": 0.002911438699811697, "Neutral": 0.3361053764820099}, {"Time": 11, "Angry": 0.09601837396621704, "Disgust": 0.0015508384676650169, "Fear": 0.056754779070615775, "Happy": 0.0013818064471706748, "Sad": 0.7048842906951904, "Surprise": 0.002980176592245698, "Neutral": 0.1364297866821289}, {"Time": 12, "Angry": 0.08743096143007277, "Disgust": 0.0017867597052827477, "Fear": 0.062318146228790276, "Happy": 0.0009583981591276824, "Sad": 0.6617335677146912, "Surprise": 0.002215225948020816, "Neutral": 0.1835569143295288}, {"Time": 13, "Angry": 0.12824638187885284, "Disgust": 0.011094462126493454, "Fear": 0.09854401648044586, "Happy": 0.000902782310731709, "Sad": 0.6478283405303955, "Surprise": 0.012939105741679668, "Neutral": 0.1004449874162674}, {"Time": 14, "Angry": 0.12197515368461607, "Disgust": 0.0021666211541742086, "Fear": 0.10020314157009123, "Happy": 0.0051666335202753535, "Sad": 0.4864695072174072, "Surprise": 0.010581477545201778, "Neutral": 0.2734374701976776}, {"Time": 15, "Angry": 0.1187228187918663, "Disgust": 0.005079330410808325, "Fear": 0.0642695501446724, "Happy": 0.01090705394744873, "Sad": 0.5504971146583557, "Surprise": 0.009294875897467136, "Neutral": 0.241229310631752}, {"Time": 16, "Angry": 0.061788547784090035, "Disgust": 0.002362279454246164, "Fear": 0.050588928163051605, "Happy": 0.004803265910595656, "Sad": 0.7809210419654846, "Surprise": 0.0015044414903968573, "Neutral": 0.09803146868944168}, {"Time": 17, "Angry": 0.13344673812389374, "Disgust": 0.0026664866600185637, "Fear": 0.07468992471694946, "Happy": 0.0038755680434405812, "Sad": 0.6535575985908508, "Surprise": 0.002661555539816618, "Neutral": 0.12910206615924835}, {"Time": 18, "Angry": 0.09655948728322984, "Disgust": 0.0034085912629961967, "Fear": 0.05309225618839264, "Happy": 0.001938780304044485, "Sad": 0.7510979175567627, "Surprise": 0.002013426506891847, "Neutral": 0.09188945591449738}, {"Time": 19, "Angry": 0.11256659030914308, "Disgust": 0.008917773142457008, "Fear": 0.05928769335150719, "Happy": 0.0038610845804214478, "Sad": 0.5811201930046082, "Surprise": 0.004123978782445192, "Neutral": 0.2301227301359177}, {"Time": 20, "Angry": 0.15906621515750885, "Disgust": 0.0020120565313845873, "Fear": 0.07008356600999832, "Happy": 0.006002856884151697, "Sad": 0.5444973111152649, "Surprise": 0.002829937729984522, "Neutral": 0.2155080735683441}, {"Time": 21, "Angry": 0.09184370189905168, "Disgust": 0.010112181305885315, "Fear": 0.06851588934659958, "Happy": 0.002858706749975681, "Sad": 0.7320268154144287, "Surprise": 0.0035599647089838977, "Neutral": 0.09108275175094603}, {"Time": 22, "Angry": 0.13171595335006714, "Disgust": 0.002353098476305604, "Fear": 0.05494287610054016, "Happy": 0.0038150618784129615, "Sad": 0.555323600769043, "Surprise": 0.0036206690128892656, "Neutral": 0.2482287138700485}, {"Time": 23, "Angry": 0.10988465696573256, "Disgust": 0.001464902074076235, "Fear": 0.07314769178628923, "Happy": 0.012260644696652891, "Sad": 0.4407009780406952, "Surprise": 0.004764922894537449, "Neutral": 0.3577762246131897}, {"Time": 24, "Angry": 0.14581698179244995, "Disgust": 0.0031276172958314423, "Fear": 0.08190357685089111, "Happy": 0.006472537759691478, "Sad": 0.4422154128551483, "Surprise": 0.006529018748551607, "Neutral": 0.313934862613678}, {"Time": 25, "Angry": 0.09970463812351227, "Disgust": 0.0026740012690424923, "Fear": 0.0498904325067997, "Happy": 0.0049173571169376365, "Sad": 0.5325933694839478, "Surprise": 0.0029570378828793764, "Neutral": 0.3072631061077118}, {"Time": 26, "Angry": 0.10649238526821136, "Disgust": 0.0036310881841927775, "Fear": 0.09700006991624832, "Happy": 0.018000653013586998, "Sad": 0.40182599425315857, "Surprise": 0.01835046522319317, "Neutral": 0.3546993732452393}, {"Time": 27, "Angry": 0.13404375314712524, "Disgust": 0.003645047079771757, "Fear": 0.094720296561718, "Happy": 0.00571377482265234, "Sad": 0.4871838390827179, "Surprise": 0.008026311174035072, "Neutral": 0.2666669487953186}, {"Time": 28, "Angry": 0.1055826172232628, "Disgust": 0.0007977403583936392, "Fear": 0.08848828077316284, "Happy": 0.00572460750117898, "Sad": 0.45354309678077703, "Surprise": 0.005133932922035457, "Neutral": 0.3407297134399414}, {"Time": 29, "Angry": 0.08669884502887726, "Disgust": 0.0077707343734800816, "Fear": 0.1090104877948761, "Happy": 0.1147463321685791, "Sad": 0.5545666217803955, "Surprise": 0.0133388489484787, "Neutral": 0.1138680949807167}, {"Time": 30, "Angry": 0.09678873419761658, "Disgust": 0.0012427596375346186, "Fear": 0.06587043404579163, "Happy": 0.008356034755706787, "Sad": 0.5366367101669312, "Surprise": 0.003767511574551463, "Neutral": 0.2873378694057465}, {"Time": 31, "Angry": 0.08974732458591461, "Disgust": 0.0026099439710378647, "Fear": 0.031436167657375336, "Happy": 0.008127900771796703, "Sad": 0.6563745737075806, "Surprise": 0.0034126548562198877, "Neutral": 0.20829151570796967}]}};
      var embedOpt = {"mode": "vega-lite"};

      function showError(el, error){
          el.innerHTML = ('<div class="error" style="color:red;">'
                          + '<p>JavaScript Error: ' + error.message + '</p>'
                          + "<p>This usually means there's a typo in your chart specification. "
                          + "See the javascript console for the full traceback.</p>"
                          + '</div>');
          throw error;
      }
      const el = document.getElementById('vis');
      vegaEmbed("#vis", spec, embedOpt)
        .catch(error => showError(el, error));

  </script>
</body>
</html>